<template>
    <div class="wrapper">
        <Upload
                :onProgress="onProgress"
                :onComplete="onComplete"
        >
            <div class="uploadDIV">
                <div class="for_border">
                    <SvgIcon icon="icon-shangchuanicon" style="font-size:100px;"></SvgIcon>
                    <span>上传图片</span>
                </div>
            </div>
        </Upload>
        <div class="previews">
            <div class="imageList"
                 v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="disabled_loading"
                 infinite-scroll-distance="10"
            >
                <div class="imageItem" v-for="(item,index) in current_list" :key="index">
                    <SvgIcon icon="icon-close" class="icon-close" @click.native="closeImage(item, $event)"></SvgIcon>
                    <img :src="item.image.url" alt=""/>
                </div>
            </div>

            <div v-if="disabled_loading" class="bottom_line">
                我也是有底线的
            </div>
        </div>
    </div>
</template>
<script>
    import Upload from '../../components/upload'
    import withStore from "../../vuex/withStore";
    import SvgIcon from '../../components/svgIcon'
    import {deleteImage, getAllUserImage} from "./service";
    import MyAlert from "../../utils/myalert";

    export default withStore({
        components: {
            Upload, SvgIcon
        },
        data() {
            return {
                disabled_loading: false,
                current_list: this.$store.state.uploadImage.current_list,
                page: this.getStore("uploadImage.page"),
            }
        },
        mounted() {
            this.loadMore()
        },
        methods: {
            loadMore() {
                var self = this
                var current_list = this.$data.current_list
                var {limit, offset} = this.$data.page
                getAllUserImage({limit, offset}).then(lists => {
                    if (lists.length == 0) {
                        self.$data.disabled_loading = true
                        return false
                    }
                    if(current_list){
                        current_list = current_list.concat(lists)
                        self.$data.current_list = current_list
                        var _offset = offset + limit
                        self.$data.page = {limit, offset: _offset}
                        self.setStore("uploadImage.current_list", self.$data.current_list)
                        self.setStore("uploadImage.page", self.$data.page)
                    }
                })
            },
            closeImage(item, e) {
                var self = this
                var current_list = this.$data.current_list
                e.stopPropagation()
                e.preventDefault()
                deleteImage(item).then(res => {
                    var index = current_list.findIndex(_item => _item.objectId == item.objectId)
                    current_list.splice(index, 1)
                    self.$data.current_list = current_list
                    this.setStore("uploadImage.current_list", current_list)
                }).catch(e => {
                    MyAlert.fail(e)
                })
                return false
            },
            onProgress(i, obj) {
                this.current_list.unshift(obj)
                this.setStore("uploadImage.current_list", this.current_list)
            },
            onComplete() {
            }
        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        .bottom_line {
            height: px2rem(60);
            display: flex;
            align-items: center;
            justify-content: center;
            padding-right: px2rem(20);
        }
        .uploadDIV {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .for_border {
                padding-top: 10px;
                padding-bottom: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border: 1px solid #eee;
                width: px2rem(350);
            }
        }
        .imageList {
            margin-top: 20px;
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

        }
        .imageItem {
            position: relative;
            margin-bottom: 10px;
            width: 49%;
            height: 200px;
            border: 1px solid #eee;
            img {
                max-height: 100%;
                max-width: 100%;
            }
            .icon-close {
                display: none;
            }
            &:hover .icon-close {
                display: block;
                position: absolute;
                right: 10px;
                top: 10px;
            }
        }
    }
</style>